<!DOCTYPE html>
<html lang="en" xmlns:th="http://thyneleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div th:replace="/common/header"></div>
<div id="Content">
<div id="BackLink"><a href="/Main/enter">
    Return to Main Menu</a></div>

<div id="Catalog">

    <div id="Cart">

        <h2>Shopping Cart</h2>
        <form action="UpdateCartQuantities?username=${sessionScope.username}" method="post" >
            <style type="text/css">

                table {
                    width: 700px;
                    padding: 0;
                    margin: 0;
                }

                caption {
                    padding: 0 0 5px 0;
                    width: 700px;
                    font: italic 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
                    text-align: right;
                }

                th {
                    font: bold 20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
                    color: #f5ba11;
                    border-right: 1px solid #bfa986;
                    border-bottom: 1px solid #bfa986;
                    border-top: 1px solid #bfa986;
                    letter-spacing: 2px;
                    text-transform: uppercase;
                    text-align: left;
                    padding: 6px 6px 6px 12px;
                    background: #eee0c5 no-repeat;
                }

                td {
                    border-right: 1px solid #bfa986;
                    border-bottom: 1px solid #bfa986;
                    background: #fff;
                    font-size:16px;
                    padding: 6px 6px 6px 12px;
                    color: #4f6b72;
                }


            </style>
            <table id="tab">
                <tr>
                    <th><b>Item ID</b></th>
                    <th><b>Product ID</b></th>
                    <th><b>Description</b></th>
                    <th><b>Quantity</b></th>
                    <th><b>List Price</b></th>
                    <th><b>Total Cost</b></th>
                    <th>&nbsp;</th>
                </tr>
                    <tr th:if = "${cartListsize==0}">
                        <td colspan="8"><b>Your cart is empty.</b></td>
                    </tr>

                    <tr th:each="cart:${cartList}">
                        <td>
                            <a th:href="${'/category/ViewItem?itemId='}+${cart.itemid}"><th:block th:text="${cart.itemid}" />
                               </a>
                        </td>
                        <td><th:block th:text="${cart.productid}" />
                       </td>
                        <td><th:block th:utext="${cart.description}" />
                           </td>
                        <td>
                            <input type="text" id="quantity" class="im" onblur="updateCart();" name="${cart.itemid}"  th:value="${cart.quantity}">
                            <script type="text/javascript" src="../js/updateCart.js"></script>
                        </td>
                        <td><th:block th:text="${cart.listprice}" />
                           </td>
                        <td>
                            <label id="total"><th:block th:text="${cart.total}" />
                               </label>
                            <!--<fmt:formatNumber value="${cart.total}"
                            pattern="$#,##0.00" />-->
                        </td>
                        <td>
                            <a th:href="${'/cart/DeleteItem?itemid='}+${cart.itemid}" class="Button"> Remove </a>
                        </td>
                    </tr>
                    <script src="../js/cartChange.js"></script>

                </th:each>
                <tr>
                <tr id="lastTR">
                    <td colspan="7" id="lastTD">
                        Sub Total:<label id="subtotal"><th:block th:text="${subTotal}" />
                       </label>
                        <!--<fmt:formatNumber value="${sessionScope.cart.subTotal}" pattern="$#,##0.00" />-->
                    </td>
                    <td>&nbsp;</td>
                </tr>
            </table>
            </tr>
            </table>

        </form>
            <!--<th:each="cart:${cartList}">-->
            <a th:if="${cartListsize > 0}" href="/order/NewOrderForm" class="Button">Proceed to Checkout</a>
        </div>


    <div id="Separator">&nbsp;</div>
</div>
</div>
<div th:replace="/common/footer"></div>
</body>
</html>